import React from 'react';
// import Link from 'next/link';
export default function Nav(props) {
  function getData() {
    if (props.columnList) {
      return props.columnList;
    } else {
      return [
        {
          route: 'xxx',
          modalID: 1,
          name: 'test',
        },
        {
          route: 'xxxs',
          modalID: 2,
          name: 'test-tow',
        },
        {
          route: 'xxxsdf',
          modalID: 3,
          name: 'test-three',
        },
      ];
    }
  }
  return (
    <>
      <header className='nav'>
        <div className='logo'></div>
        <div className='menu'>
          <ul>
            {getData() &&
              getData().map((d) => {
                return (
                  <li key={d.id}>
                    <a href={`/${d.modalId}/${d.route}`}>{d.name}</a>
                  </li>
                );
              })}
          </ul>
        </div>
        <div className='control'></div>
      </header>
      <style jsx>{`
        .nav {
          height: 65px;
          background: #fff;
          display: flex;
          padding: 0px 30px;
          align-items: center;
          justify-content: space-between;
        }
        .logo {
          height: 38px;
          width: 117px;
          background-image: url(https://www.unicloud.com/upload/images/2022/1/d3de17946a411f84.png);
          backgorund-repeat: no-repeat;
          background-size: cover;
          flex-shrink: 0;
        }

        .menu {
          min-width: 1000px;
          height: 50px;
          background: #ccc;
          flex-shrink: 0;
          display: flex;
          align-items: center;
        }

        .menu ul {
          list-style: none;
          font-size: 16px;
          display: flex;
        }

        .menu ul li {
          margin-right: 10px;
        }

        .control {
          height: 50px;
          width: 200px;
          background: cyan;
          flex-shrink: 0;
        }
      `}</style>
    </>
  );
}
